<template>
  <div class="see">
    <div style="display: flex;margin: 0px auto;max-width: 600px;padding-left: 10px;"><span @click="$router.replace('/home')"  class="el-icon-arrow-left" style="font-size: 25px;opacity: 0.6"></span></div>
    <div class="search_wrapper" style="margin-right: 10px">
      <div class="search_inner">
        <div class="feature_select_wrapper" style="margin: 0 auto;padding: 15px;">
          <el-select size="medium" class="feature_select" style="max-width: 550px;width: 100%"
                     v-model="features" multiple filterable allow-create default-first-option placeholder="请选择系统特征">
            <el-option v-for="item in options" :key="item" :label="item" :value="item">
            </el-option>
          </el-select>
        </div>

        <div class="search">
          <el-input class="see_input" placeholder="请输入特征" v-model="input_feature" clearable style="margin: 0 10px"></el-input>
          <el-button icon="el-icon-plus" circle @click="addMyFeature"></el-button>
        </div>
        <div class="select_wrapper see_select_wrapper">
          <div style="margin: 10px 10px;line-height: 40px;font-weight: bold;color: #409eff">个性选择:</div>
          <el-select v-model="cmd_value" placeholder="请选择">
            <el-option v-for="item in option_cmd" :key="item" :value="item"></el-option>
          </el-select>
          <el-select v-model="imp_value" placeholder="请选择">
            <el-option v-for="item in option_imp" :key="item" :value="item"></el-option>
          </el-select>
        </div>
        <div class="search">
          <el-input class="see_input" placeholder="请输入单词" v-model="searchword_input" clearable style="margin: 0 10px"></el-input>
          <el-button icon="el-icon-search" circle @click="findWords"></el-button>
        </div>
      </div>
    </div>
    <div class="see_center_border" style="width: 100%;height: 10px;background-color: rgba(211,211,211,0.3);margin-top: 20px"></div>
    <div class="see_router_view" style="box-shadow: 0 0 12px rgba(0,0,0,0.3);padding-top:  0;">
      <div class="checkbox" style="box-shadow: 0px 2px 12px rgba(0,0,0,0.2);padding-bottom: 8px;padding-top: 8px;">
        <span style="font-size: 12px">列表形式</span>
        <el-switch v-model="checked_mode" active-color="#13ce66" @change="checkboxChange" inactive-color="#ff4949"></el-switch>
        <span style="font-size: 12px;margin-left: 20px" >显示翻译</span>
        <el-switch v-model="checked_fanyi" active-color="#13ce66" @change="" inactive-color="#ff4949"></el-switch>
      </div>
      <div class="change_mode_wrapper" style="margin-top: 20px">
        <WordList v-show="checked_mode" :showfyi="checked_fanyi"></WordList>
        <ReviewBlock v-show="!checked_mode" :showfanyi="checked_fanyi"></ReviewBlock>
      </div>
<!--      <router-view style="margin-top: 20px"></router-view>-->
    </div>

  </div>
</template>

<script>
    import {postRequest} from "../../utils/api";
    import WordList from "../word_list/WordList";
    import ReviewBlock from "../reviewblock/ReviewBlock";
    import {strsutils} from "../../utils/strutils";

    let baseurl = strsutils.baseurl

    export default {
      name: "See",
      components: {ReviewBlock, WordList},
      data(){
        return {
          searchword_input: '',
          features: [],
          options: strsutils.sys_features,
          checked_mode: true,
          checked_fanyi: true,
          input_feature: '',
          cmd_value: '全部',
          imp_value: '全部'
        }
      },
      computed: {
        option_cmd(){
          let cmds = []
          strsutils.cmds.forEach((value, index)=>{
            cmds.push(value)
          })
          cmds.push('全部')
          return cmds
        },
        option_imp(){
          let imps = []
          strsutils.imps.forEach((value, index)=>{
            imps.push(value)
          })
          imps.push('全部')
          return imps
        }
      },
      mounted() {
        console.debug('see mount')
        let cur_wordid = window.localStorage.getItem('cur_wordid')
        if (cur_wordid == 0){
          this.findWords()
        }
      },
      methods: {
        findWords(){
          let _this = this
          let param = {
            userid: window.localStorage.getItem('userid'),
            word: this.searchword_input,
            feature_strs: this.features,
            cmd: this.cmd_value,
            imp: this.imp_value
          }
          postRequest(baseurl+'/findWordByCondition', param).then(function (res) {
            _this.$message.success("查询words成功")
            // console.debug("查询得到的words："+JSON.stringify(res.data))
            _this.$store.commit("setSeeFindWordList", res.data)
          }).catch(function (err) {
            _this.$message.error("查询words出错")
            // console.debug("查询words出错"+err)
          })
        },
        addMyFeature(){
          if(this.input_feature!=''){
            console.debug(this.features)
            for (let i = 0;i < this.features.length;i++){
              var item = this.features[i]
              if(item == this.input_feature){
                return
              }
            }
            this.features.push(this.input_feature)
          }
        },
        checkboxChange(){
          this.mode = !this.mode
        }
      }

    }
</script>

<style>
  .see_input .el-input__inner{ border-radius: 50px;}
  .see_select_wrapper .el-select{width: 30%;margin: 10px 10px}
</style>

<style scoped>
.search_inner div{display: flex;max-width: 600px;}
.select_wrapper{
  max-width: 800px;
}
.search{margin: 0 auto}
.select_wrapper{margin: 0 auto}
.select_wrapper el-select{
  width: 30%;margin: 0 30px;
}
</style>
